import React from 'react';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
import styles from './IndexCaseResearch.less';

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

const caseList = [
  {
    image: '/images/index/case_1.jpg',
    name: '自如',
    contractNo: '合同数量：40万+',
    intro:
      '自如作为提供租房产品及服务的O2O互联网品牌，旗下现拥有自如友家、自如整租、自如寓、自如驿、自如民宿及业主直租六大产品线。收房租房作为自如主要业务，在执行的租赁合同数量已达400K+,并以每月10-20K的速度进行合同新增和变更。Seepln Leasing协助自如实现准则切换的平稳过渡，及时准确出具披露报表，每月高效完成多达数十万份合同凭证的月结。',
  },
  {
    image: '/images/index/case_2.jpg',
    name: '宝胜集团',
    contractNo: '合同数量：9500+',
    intro:
      '全国6000+门店的租赁合同管理、复杂租金建模、新准则租赁核算、租金支付管理、多动因管理分摊及多场景模拟测算，确保宝胜集团实现2019年1月起新租赁准则的顺利切换，该项目也成为宝胜集团业财一体化战略的重要举措。',
  },
  {
    image: '/images/index/case_3.jpg',
    name: '太平洋保险集团',
    contractNo: '合同数量：7000+',
    intro:
      '太平洋保险全国6000多处物业的租赁全生命周期管理，从租赁需求预测，到流程审批，预算控制，租金分析等。从租赁业务流程角度，在适应新租赁准则的基础上，做到对预算端，核算端，披露端，分析端的全流程管控，提高集团对租赁事项、租金支付、资产使用情况的全方位的管理能力。',
  },
];

const IndexCaseResearch: React.FC = () => {
  const [caseIndex, setCaseIndex] = React.useState(0);

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div />
        <div className={styles.caseTitle}>案例研究</div>
        <div />
      </div>
      <div className={styles.swipeWrap}>
        <AutoPlaySwipeableViews
          enableMouseEvents
          style={{ overflowX: 'visible', width: 440 }}
          slideStyle={{ padding: '30px 0', overflow: 'visible' }}
          index={caseIndex}
          onChangeIndex={setCaseIndex}
        >
          {caseList.map((item, index) => (
            <div key={index} className={styles.swipeItem}>
              <div className={styles.itemHead}>
                <img src={item.image} alt="" />
                <div className={styles.itemTitle}>
                  <span>{item.name}</span>
                  <span>{item.contractNo}</span>
                </div>
              </div>
              <div className={styles.itemBody}>{item.intro}</div>
            </div>
          ))}
        </AutoPlaySwipeableViews>
      </div>
    </div>
  );
};

export default IndexCaseResearch;
